<template>
  <form action="" ref="df" class="form-horizontal">
    <!-- <div class="form-group">
      <label class="col-sm-2 control-label">GoodId:</label> 
      <div class="col-sm-8">
        <input type="text" v-model="datas.goodsid" v-validate="'required'" name="GoodsId" class="form-control input-sm">
      </div>
      <p class="col-sm-2 error-msg" v-show="errors.has('GoodsId')">{{errors.first('GoodsId')}}</p>
    </div> -->
    <div class="form-group">
      <div class="col-sm-2 control-label">GoodCode:</div>
      <div class="col-sm-8">
        <input :readonly="mode ==='edit'" type="text" class="form-control" v-model="datas.goodcode" v-validate="'required'" name="GoodCode">
      </div>
      <p class="col-sm-2 error-msg" v-show="errors.has('GoodCode')">{{errors.first('GoodCode')}}</p>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">GoodNo:</div>
      <div class="col-sm-8">
        <input :readonly="mode ==='edit'" type="text" class="form-control" v-model="datas.goodno" v-validate="'required'" name="GoodNo">
      </div>
      <p class="col-sm-2 error-msg" v-show="errors.has('GoodNo')">{{errors.first('GoodNo')}}</p>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">价格：</div>
      <div class="col-sm-8">
        <input type="number" class="form-control" v-model="datas.price" v-validate="'required'" name="price">
      </div>
      <p class="col-sm-2 error-msg" v-show="errors.has('price')">{{errors.first('price')}}</p>
    </div>

    <!-- <div class="form-group">
      <div class="col-sm-2 control-label">图片:</div>
      <div class="col-sm-8">
        <upload-image :src="proImg" :upload="handleUpload" size="small"></upload-image>
      </div>
    </div> -->

    <!-- <div class="form-group">
      <div class="col-sm-2 control-label">产品名:</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.name" v-validate="'required'" name="name">
      </div>
      <p class="col-sm-2 error-msg" v-show="errors.has('name')">{{errors.first('name')}}</p>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">icon</div>
      <div class="col-sm-8">
        <icon-selector :iconStr.sync="datas.icon"></icon-selector>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">PDF图片:</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.pdfimage" v-validate="'required'" name="pdfimage">
      </div>
      <p class="col-sm-2 error-msg" v-show="errors.has('pdfimage')">{{errors.first('pdfimage')}}</p>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">PDF文件:</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.pdf" v-validate="'required'" name="pdf">
      </div>
      <p class="col-sm-2 error-msg" v-show="errors.has('pdf')">{{errors.first('pdf')}}</p>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">电子书地址:</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.pdfbook" v-validate="'required'" name="pdfbook">
      </div>
      <p class="col-sm-2 error-msg" v-show="errors.has('pdfbook')">{{errors.first('pdfbook')}}</p>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">视频地址:</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.movie" name="">
      </div>
    </div>
     <div class="form-group">
      <div class="col-sm-2 control-label">特点：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.features" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">规格：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.specifications" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">特殊用途：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.specificUse" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">备注：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.remarks" name="">
      </div>
    </div>
    <div class="form-group">
      产品参数
    </div> -->
    <div class="form-group">
      <div class="col-sm-2 control-label">材料:</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.material" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">RoHs:</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.rohs" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">产品重量：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.mass" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">钥匙种类：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.keykind" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">挂锁：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.nankin" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">安装距离：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.pitch" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">直径：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.diameter" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">销子：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.pin" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">长：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.length" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">宽：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.width" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">板厚：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.thick" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">孔：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.hole" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">偏置高度：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.offsethimax" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">上推行程：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.door" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">水平位置：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.horizontal" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">上推：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.removal" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">全长：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.maxlength" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">钥匙编号：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.keyno" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">锁种类：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.lockkind" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">调节：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.adjust" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">保持力(N):</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.power" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">单配钥匙数量：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.differ" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">max温度：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.maxtemp" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">min温度：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.mintemp" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">额定电压：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.volt" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">通电时：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.ratingtype" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">锁样式：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.locktype" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">车轮材质：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.wheelmaterial" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">安装高度：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.onheight" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">容许荷载(N):</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.allowload" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">轴径：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.shaftdiameter" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">总长：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.totallength" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">调整范围：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.shaftlength" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">行程：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.stroke" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">status：</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.status" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">备注：</div>
      <div class="col-sm-8">
        <input type="text" v-model="datas.gremarks" name="gremarks" class="form-control">
      </div>
    </div>
    <!-- <div class="form-group">
      <div class="col-sm-2 control-label">deliveryDate:</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.deliveryDate" name="">
      </div>
    </div> -->
    <!-- <div class="form-group">
      <div class="col-sm-2 control-label">2D.DXF:</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.dxf" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">3D.SAT:</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.sat" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">3D.X_T:</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.x_t" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">3D.STEP:</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.step" name="">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2 control-label">3D.IGS:</div>
      <div class="col-sm-8">
        <input type="text" class="form-control" v-model="datas.igs" name="">
      </div>
    </div> -->
    <div class="form-group">
      <b-button size="sm" variant="primary" @click="handleSubmit">
        <i class="fa fa-dot-circle-o">提交</i>
      </b-button>
    </div>
  </form>
</template>
<script>
  import UploadImage from './UploadImage'
  import IconSelector from './IconSelector'
  import { proPicUrl } from '../service/api'
  import { pick } from 'lodash'
  // import { html2Plain } from '../utils/filter-data'
  export default {
    name: 'product-form',
    components: {
      UploadImage,
      IconSelector
    },
    props: {
      pro: {
        type: Object,
        default () {
          return {
            image: '',
            icon: ''
          }
        }
      },
      mode: {
        type: String,
        /* add | edit | view */
        default: 'add'
      }
    },
    data () {
      return {
        datas: {}
      }
    },
    computed: {
      proImg: {
        get () {
          return `${proPicUrl}lv4/${this.datas.class1}/${this.datas.image}`
        }
      }
    },
    methods: {
      /* 提交 */
      handleSubmit () {
        this.$validator
          .validateAll()
          .then(res => {
            if (res) {
              // @todo 图片必选
              // this.$emit('update:pro', this.datas)
              this.$emit('submit', { ...this.datas })
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      /* 处理图片 */
      handleUpload (...rest) {
        console.log(rest)
        console.log(this.datas)
      },
      initDatas () {
        this.datas = this.mode !== 'add'
          ? { ...this.pro }
          : pick(this.pro, ['class1', 'goodid', 'image', 'goodsid'])
      }
    },
    watch: {
      'pro.goodsid': {
        handler (v) {
          if (!v) return
          this.initDatas()
        },
        immediate: true
      }
    },
    created () {
      this.initDatas()
    }
  }
</script>
<style lang="scss" scoped>
  .form-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .error-msg {
    color: #d40000;
    font-size: 12px;
  }
</style>
